Mejora tu interfaz de usuario: Dominando la API de Resaltado Personalizado de CSS para Estilizar la Selección de Texto

En este ejemplo, hemos definido un nombre de resaltado personalizado llamado code-highlight. Luego, hemos aplicado este resaltado a elementos code. El color de fondo se establece en azul claro (#ADD8E6), el color del texto se establece en azul oscuro (#00008B) y el peso de la fuente se establece en negrita. Ahora, cada vez que se seleccione texto dentro de un elemento code, se le aplicará un estilo con estos estilos personalizados.

Uso avanzado: Apuntar a rangos de texto específicos

La API de Resaltado Personalizado de CSS también se puede utilizar para apuntar a rangos de texto específicos dentro de un elemento. Esto permite un control aún más granular sobre el estilo de selección de texto.

Ejemplo: Resaltado de términos de búsqueda

Imagina que quieres resaltar los términos de búsqueda dentro de un documento. Esto a menudo requiere JavaScript junto con la API de Resaltado de CSS.

1. Usa JavaScript para identificar los términos de búsqueda: Usa JavaScript para encontrar todas las apariciones del término de búsqueda dentro del documento.
2. Crea rangos de resaltado: Usa la API Range en JavaScript para crear rangos para cada aparición del término de búsqueda.
3. Aplica el resaltado: Usa el método CSS.highlights.set() para aplicar el resaltado a los rangos creados.

            
// Código JavaScript para resaltar los términos de búsqueda
function highlightSearchTerms(searchTerm) {
  // Primero, define el resaltado personalizado en CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Encuentra todos los nodos de texto
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Aplica los resaltados usando CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('La API de Resaltado Personalizado de CSS no es totalmente compatible con este navegador. Proporcionando una alternativa');
    // Proporciona una alternativa para navegadores con soporte limitado (por ejemplo, Safari más antiguo)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Salmón claro
      span.style.color = '#000000'; // Negro
      span.className = 'search-highlight-fallback'; // Añade una clase para el estilo de la alternativa
      range.surroundContents(span);
    });
  }
}

// Código CSS para estilizar el resaltado de búsqueda
::highlight(search-highlight) {
  background-color: #FFA07A; /* Salmón claro */
  color: #000000; /* Negro */
}

/* Estilo alternativo para navegadores que no admiten completamente la API */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Ejemplo de uso: resaltar el término "ejemplo"
highlightSearchTerms("ejemplo");

            

              
                Copy
              
            
          

Este fragmento de código demuestra cómo resaltar los términos de búsqueda dentro de un documento utilizando JavaScript y la API de Resaltado Personalizado de CSS. El código JavaScript identifica los términos de búsqueda, crea rangos para cada aparición y aplica search-highlight a esos rangos. El código CSS luego estiliza el texto resaltado con un fondo salmón claro y texto negro.

Nota importante: Este enfoque requiere JavaScript y se basa en la API CSS.highlights. Dado que la compatibilidad no es universal, se demuestra un mecanismo de reserva (como rodear el texto con un `span` y estilizar ese `span`).

Consideraciones de accesibilidad

Al utilizar la API de Resaltado Personalizado de CSS, es fundamental tener en cuenta la accesibilidad para garantizar que tu sitio web sea utilizable por todos, incluidos los usuarios con discapacidades.

Consejos para el estilo de selección de texto accesible:

• Asegúrate de un contraste suficiente: Mantén un contraste suficiente entre el fondo y el color del texto del texto seleccionado para que sea legible para los usuarios con problemas de visión. Las directrices WCAG recomiendan una relación de contraste de al menos 4,5:1 para el texto normal.
• Evita depender únicamente del color: No dependas únicamente del color para indicar la selección de texto. Utiliza señales visuales adicionales, como el subrayado o la negrita, para que la selección sea más evidente.
• Proporciona un estilo alternativo para el modo de alto contraste: Los usuarios que habilitan el modo de alto contraste en su sistema operativo pueden anular tus estilos personalizados. Proporciona un estilo alternativo que funcione bien en el modo de alto contraste para garantizar la legibilidad. Puedes usar consultas de medios como @media (forced-colors: active) para detectar cuándo está habilitado el modo de alto contraste.
• Prueba con tecnologías de asistencia: Prueba tu sitio web con tecnologías de asistencia, como lectores de pantalla, para asegurarte de que el texto seleccionado se anuncia y se entiende correctamente.

Ejemplo: Asegurar un contraste suficiente

            
::highlight {
  background-color: #000080; /* Azul marino */
  color: #FFFFFF; /* Blanco */
}

            

              
                Copy
              
            
          

En este ejemplo, hemos elegido un color de fondo azul marino y un color de texto blanco, lo que proporciona un contraste suficiente para los usuarios con problemas de visión. Utiliza siempre un comprobador de contraste de color para verificar que tus elecciones de color cumplen las normas de accesibilidad. Herramientas como Comprobador de contraste de WebAIM pueden ser útiles.

Ejemplos prácticos y casos de uso

La API de Resaltado Personalizado de CSS ofrece una amplia gama de posibilidades para mejorar la experiencia del usuario. Aquí tienes algunos ejemplos prácticos y casos de uso:

• Resaltado de código: Como se demostró anteriormente, puedes usar la API para resaltar fragmentos de código con estilos personalizados, haciéndolos más atractivos visualmente y más fáciles de leer.
• Resaltado de términos de búsqueda: Resalta los términos de búsqueda dentro de un documento para ayudar a los usuarios a localizar rápidamente la información que buscan.
• Resaltado de errores: Resalta los errores o advertencias en formularios u otras interfaces de usuario para llamar la atención del usuario sobre ellos.
• Resaltado de citas: Resalta el texto citado en trabajos o artículos académicos para distinguirlo visualmente del contenido principal.
• Resaltado de conversaciones: En las aplicaciones de chat, resalta los propios mensajes del usuario o los mensajes de usuarios específicos para que sea más fácil seguirlos.
• Gamificación: Resalta palabras o frases específicas en un juego para proporcionar pistas o sugerencias al jugador.
• Resumen de texto: Resalta frases o frases clave en un documento para proporcionar un resumen rápido del contenido. Esto a menudo implica algoritmos complejos para determinar la importancia.

Mejores prácticas y consejos

Para aprovechar al máximo la API de Resaltado Personalizado de CSS, sigue estas mejores prácticas y consejos:

• Usa nombres de resaltado descriptivos: Elige nombres de resaltado descriptivos que indiquen claramente el propósito del resaltado. Esto hará que tu código sea más legible y mantenible. Por ejemplo, usa code-highlight en lugar de highlight-1.
• Mantén los estilos consistentes: Mantén un estilo consistente en todos tus resaltados para crear una experiencia de usuario cohesiva. Usa un sistema de diseño o una guía de estilo para asegurar la consistencia.
• Evita el uso excesivo de resaltados: No uses demasiados resaltados, ya que esto puede distraer y abrumar a los usuarios. Úsalos con moderación y estratégicamente para llamar la atención sobre la información más importante.
• Prueba en diferentes dispositivos y navegadores: Prueba tu sitio web en diferentes dispositivos y navegadores para asegurarte de que tus resaltados personalizados se muestren correctamente. Presta especial atención a los dispositivos móviles y a los navegadores más antiguos.
• Considera el rendimiento: Si bien la API de Resaltado Personalizado de CSS suele ser de rendimiento eficiente, ten en cuenta el número de resaltados que estás utilizando, especialmente en documentos grandes. Demasiados resaltados pueden afectar al rendimiento. Si estás utilizando JavaScript para administrar los resaltados, optimiza tu código para minimizar el número de manipulaciones del DOM.
• Usa la mejora progresiva: Debido a que la compatibilidad con el navegador no es universal, usa técnicas de mejora progresiva. Implementa un mecanismo de reserva utilizando estilos CSS estándar para garantizar que la experiencia siga siendo utilizable para quienes tengan navegadores más antiguos. Considera el uso de la detección de funciones (por ejemplo, comprobar la existencia de `CSS.highlights`) para determinar si se debe usar la API o la reserva.

Conclusión

La API de Resaltado Personalizado de CSS es una herramienta poderosa para mejorar la experiencia del usuario y crear selecciones de texto más atractivas visualmente e informativas. Al dominar esta API, puedes llevar el diseño de tu interfaz de usuario al siguiente nivel y proporcionar a los usuarios una experiencia de navegación más atractiva y accesible. Si bien la compatibilidad con los navegadores aún está evolucionando, comprender y experimentar con esta API ahora te posicionará para crear experiencias web de vanguardia a medida que crezca la adopción. Recuerda priorizar la accesibilidad y proporcionar alternativas para los navegadores más antiguos para garantizar una experiencia positiva para todos los usuarios.

Recursos

• MDN Web Docs: API de Resaltado Personalizado de CSS
• Can I Use: API de Resaltado Personalizado de CSS
• Comprobador de contraste de WebAIM